<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const datas = [
  { name: "南京", percent: "60", total: "158111", finished: "2" },
  { name: "天津", percent: "20", total: "16522", finished: "2" },
  { name: "上海", percent: "20", total: "5823", finished: "2" },
  { name: "广州", percent: "20", total: "3244", finished: "6" },
];
const yData = datas.map((item) => item.name);
const zData = datas.map((item) => item.finished);
const pData = datas.map((item) => item.percent);
// 设置等长的背景柱状图
const maxData = new Array(yData.length).fill(100);
var option = ref({
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: false,
  },
  xAxis: [
    {
      show: true,
    },
    {
      show: false,
      splitLine: {
        show: false,
      },
    },
  ],
  dataZoom: [
    {
      type: "slider",
      realtime: true, // 拖动时，是否实时更新系列的视图
      startValue: 0,
      endValue: 5,
      width: 5,
      height: "90%",
      top: "5%",
      right: 0,
      brushSelect: false,
      yAxisIndex: [0, 1], // 控制y轴滚动
      fillerColor: "#0093ff", // 滚动条颜色
      borderColor: "rgba(17, 100, 210, 0.12)",
      backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
      handleSize: 0, // 两边手柄尺寸
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, // 拖拽时是否展示滚动条两侧的文字
      zoomLock: true,
      moveHandleStyle: {
        opacity: 0,
      },
    },
    {
      type: "inside",
      yAxisIndex: [0, 1],
      zoomOnMouseWheel: false, // 关闭滚轮缩放
      moveOnMouseWheel: true, // 开启滚轮平移
      moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
    },
  ],
  yAxis: [
    {
      show: true,
      inverse: true,
      data: yData,
      position: "left",
      axisLabel: {
        lineHeight: 0,
        verticalAlign: "bottom",
        fontSize: 14,
        color: "#e6a635",
        formatter: "{value}",
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    {
      show: true,
      data: zData,
      offset: 5,
      position: "right",
      axisLabel: {
        lineHeight: 0,
        verticalAlign: "bottom",
        fontSize: 14,
        color: "#19E5E6",
        formatter: "{value}",
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "进度",
      show: true,
      type: "bar",
      barGap: "-100%",
      xAxisIndex: 1,
      barWidth: 20,
      itemStyle: {
        borderRadius: 10,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#0A7782", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#81EFF3", // 0% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      label: {
        show: true,
        position: "insideRight",
        formatter: "{c}%",
        offset: [-10, 2],
        color: "#fff",
      },
      labelLine: {
        show: false,
      },
      z: 2,
      data: pData,
      animationDelay: 1000,
      animationDuration: 1000,
    },
    {
      name: "百分比",
      z: 1,
      show: true,
      type: "bar",
      xAxisIndex: 1,
      barGap: "-100%",
      barWidth: 20,
      itemStyle: {
        borderRadius: 4,
        color: "rgba(13, 55, 78, 1)",
      },
      label: {
        show: false,
      },
      data: maxData,
    },
  ],
});
let warp = ref("");
let myChart
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
 
});
window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%; margin-top: 0.01rem"></div>
</template>

<style></style>